<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <!--vue实例的生命周期

    -->

    <input type="text" v-model="num"/>
    <h1>{{num}}</h1>

</div>
</body>
</html>

<script src="resource/vue.js"></script>
<script src="resource/axios.min.js"></script>

<script>


    new Vue({
        el:app,
        data: {
            num:""
        },
        methods:{
        },
        beforeCreate(){},//第一个生命周期函数，这个函数执行时，仅仅完成自身内部事件和生命周期函数注入
        created(){},//第二个生命周期函数，这个函数执行时，完成自身内部事件和生命周期函数注入，包括自定义的data,methods,computed等属性注入和校验工作
        beforeMount(){},//第三个生命周期函数，这个函数执行时， el执行html还是一个原始模板，并没有完成数据渲染工作
        mounted(){},//第四个生命周期函数，这个函数执行时，vue已经完成template和el执行html渲染工作
        beforeUpdate(){},//运行阶段第一个函数，这个函数执行时，data数据已经发生了变化，但是页面数据还是原始数据
        updated(){},//运行阶段第二个函数，这个函数执行时，data数据与页面数据保持一致
    });


    //发送axios的get请求
    axios.get("url").then(function (response) {
        console.log(response);
    })

    //axios发送各种方式的异步请求
    axios.get("url").then().catch();
    axios.post("url",{firstname:"1",sencondname:"2"}).then(function (res) {}).catch();


    //创建axios的配置对象，可以少写代码
    var instance = axios.create({
        baseURL:"http://localhost:8080/"
    });
    //通过创建的实例来发送请求
    instance.get("/demo?id=1").then(function (res) {}).catch();//


    //请求拦截器，写token那些
    instance.interceptors.request.use(function (config) {
        //此处的config是包含了所有的请求信息，我们在修改了所有的请求信息后，在返回回去
        return config;
    });

    //响应拦截器
    instance.interceptors.response.use(function (response) {
        return response;
    });

</script>